<template>
	<div id="app">

		<tz8-mplayer
			:musicConfig="{ music: music, end: end, loop: endHandler }"
			:danmakuConfig="{ getFn: testGetFn, postFn: testPostFn, validator: dmValidator }">
		</tz8-mplayer>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				music: { 
					src: 'http://lty712.imdo.co/packD/66CCFF.mp3',
					cover: 'http://lty712.imdo.co/packD/1.jpg',
					name: '66CCFF',
					singer: { label: '歌手', text: '洛天依' },
					album: { label: '专辑', text: '2017演唱会' },
					origin: { label: '来源', text: '2017演唱会' },
					quality: '极高音质',
					lyrics: [
						[2.1235, 'aaaaaaaaaaaaa啊发生的'],
						[3.2562, 'bbbb'],
						[4.5638, 'cccccccccc'],
						[5.2368, 'ddddddddddddddddddddddddddddd'],
						[null, null],
						[7.5689, 'eee'],
						[8.5635, 'fffff'],
						[10.2346, 'ggggggg'],
						[12.2356, 'hhhhh'],
						[16.2354, 'iiiiiiiii'],
						[17.2356, 'j'],
						[22.5698, 'kkkkk'],
						[24.2356, 'lllll'],
						[null, null],
						[null, null],
						[37.0012, 'mmmmmmmmm'],
						[38.9686, 'nnnn'],
						[40.9686, 'ooooooooo'],
						[42.5686, 'ppp'],
						[43.9686, 'qqqqqqq']
					]
				},
				end: [['loop', '单曲循环'], ['end', '一遍结束'], ['next', '列表循环'], ['random', '列表随机']],
				danmaku: '<span danmaku="0.0010 center 0 #FFFFFF 123456">看这里看这里</span>' +
					'<span danmaku="0.0010 center 1 #FFFFFF 123456">看这里看这里</span>' +
					'<span danmaku="1.1236 rtl 10 #FFFFFF 123457">66ccff</span>' +
					'<span danmaku="2.5649 rtl 19 #66ccff 123458">天依蓝</span>' +
					'<span danmaku="2.8649 center 6 #FFFFFF 123459">123</span>' +
					'<span danmaku="3.0000 rtl 2 #FFFFFF 123459">11111</span>' +
					'<span danmaku="3.5000 rtl 3 #FFFFFF 72359">22222</span>' +
					'<span danmaku="3.5000 rtl 4 #FFFFFF 123459">3333</span>' +
					'<span danmaku="3.5000 rtl 5 #FFFFFF 123459">4444</span>' +
					'<span danmaku="4.0000 rtl 4 #FFFFFF 123458">5555</span>' +
					'<span danmaku="4.0000 rtl 5 #FFFFFF 123465">666</span>' +
					'<span danmaku="4.0000 rtl 6 #FFFFFF 1234">777</span>',
				testGetFn: {
					call: this.testGetDo,
					back: (value) => value
				},
				testPostFn: {
					call: this.testPostDo,
					back: (value) => value
				}
			}
		},

		methods: {
			testGetDo(start, end) {
				setTimeout(() => {
					this.testGetFn.back(this.danmaku);
				}, 100)
			},
			testPostDo(value) {
				setTimeout(() => {
					this.testPostFn.back(true);
				}, 50)
			},
			dmValidator(...rest) {
				return true;
			},
			endHandler(end, count) {
				if (end === 'loop') {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style>
</style>
